<template>
	<view class="school_content">
		<view>
			<view class="task-list">
				<view class="task-list-item">
					<view class="task-list-left">实验室名</view>
					<view class="task-list-right">{{room_name}}</view>
				</view>

			</view>

			<view class="task-title">申请信息</view>
			<view class="task-list" style="margin-bottom: 30rpx;padding-bottom: 20rpx;">
				<view class="task-list-item">
					<view class="task-list-left">预约时间</view>
					<view class="task-list-right">2024/12/18 08:00-10:00</view>
				</view>

				<view class="task-list-item allline">
					<view class="task-list-left"><text>*</text>预约单位</view>
					<view class="task-list-right">

						<uni-data-select style="width:70px;" v-model="company" :localdata="companyrange"
							@change="changecompany" placeholder=""></uni-data-select>


						<uni-data-select style="width:70px;" v-model="company2" :localdata="companyrange2"
							@change="changecompany"></uni-data-select>



					</view>
				</view>

				<view class="task-list-item allline">
					<view class="task-list-left"><text>*</text>预约姓名</view>
					<view class="task-list-right">
						<input class="task2_sq_input" placeholder="请输入" type="text" v-model="name1" />
					</view>
				</view>

				<view class="task-list-item allline">
					<view class="task-list-left"><text>*</text>联系方式</view>
					<view class="task-list-right">
						<input class="task2_sq_input" placeholder="请输入" type="text" v-model="name2" />
					</view>
				</view>

			 
				<view class="task-list-item allline">
					<view class="task-list-left"><text>*</text>选择工位</view>
					<view class="task-list-right2">
						<view class="gongwei">
							<view class="gongwei_gzdata">
							<text class="isshow">1</text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="isshow">2</text>
							</view>
						</view>
						
						<view class="gongwei">
							<view class="gongwei_gzdata">
							<text class="isshow">3</text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="noshow"></text>
							<text class="isshow">4</text>
							</view>
						</view>
						<view class="gongwei">
							
							<view class="gongwei_gzdata">
								
								
								<text class="isshow">5</text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="isshow">6</text>
							
							</view>
							 	</view>
						
						<view class="gongwei">
							
							<view class="gongwei_gzdata">
								
								<text class="isshow">7</text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="noshow"></text>
								<text class="isshow">8</text>
							
							</view>
							
						</view>
						
						<view class="gongwei">
							
							<view class="gongwei_gzdata">
								<text class="noshow"></text>
								<text class="isshow">9</text>
								<text class="isshow">10</text>
								<text class="isshow">11</text>
								<text class="isshow">12</text>
								<text class="noshow"></text>
							</view>
							
						</view>
						
					</view>
				</view>

			</view>

		</view>
		<view class="container">
		<view class="desc">
				<view><text decode="true" space="true" class="green"> &nbsp;</text>绿：可预约</view>
				<view><text decode="true" space="true" class="gray"> &nbsp;</text>灰：已预约</view>
				<view class="right"><text decode="true" space="true" class="red"> &nbsp;</text>红：维护</view>
			
		</view>
		</view>


		<view class="posttasktobookingBtnparent">
			<view @click="posttasktobooking" class="posttasktobookingBtn">提 交</view>
		</view>
	</view>
</template>

<script>
	import {
		formatTime,
		formatLocation,
		dateUtils
	} from '@/common/util.js';
	export default {
		data() {
			return {
				companyrange: [{
						value: 0,
						text: "校内"
					},
					{
						value: 1,
						text: "校外"
					}
				],
				companyrange2: [{
					"value": 2,
					"text": "理学院"
				}, {
					"value": 3,
					"text": "计算机学院"
				}, {
					"value": 4,
					"text": "电子科学学院"
				}, {
					"value": 5,
					"text": "前沿交叉学科学院"
				}, {
					"value": 6,
					"text": "智能科学学院"
				}, {
					"value": 7,
					"text": "系统工程学院"
				}, {
					"value": 8,
					"text": "空天科学学院"
				}, {
					"value": 12,
					"text": "气象海洋学院"
				}, {
					"value": 13,
					"text": "基础教育学院"
				}, {
					"value": 14,
					"text": "其它单位"
				}],
				company2: 2,
				company: 0,
				name: '',
				name1: '',
				name2: '',
				name3: '',
				room_name: '',
				equipment_name: '',
			}
		},
		onLoad(options) {
			// if (options.id) {

			// 	this.booking_eid = options.id

			// 	const date = new Date();
			// 	const dateformat = util.formatDate(date, '-');
			// 	if (uni.getStorageSync('task2fieldsflag') && uni.getStorageSync('task2fieldsflag') != "") {
			// 		let task2fieldsflag = uni.getStorageSync('task2fieldsflag');
			// 		if (task2fieldsflag != dateformat) {
			// 			this.clearwxStorage();
			// 		}
			// 	} else {
			// 		uni.setStorageSync('task2fieldsflag', dateformat);
			// 	}

			// 	let booking_wtime = "";
			// 	if (options.wtime) {
			// 		booking_wtime = options.wtime;
			// 	}
			// 	if (options.wdate && options.mode && options.wtno) {

			// 		this.booking_wdate = options.wdate
			// 		this.booking_wtime = options.wtime
			// 		this.booking_mode = options.mode
			// 		this.booking_tno = options.wtno

			// 	}
			// 	this.gettask()
			// 	this.getcollegelist()
			// 	this.makeSessionkey(0)


			// }
			this.initdata()
		},
		methods: {
			changecompany(e) {
				console.log("e:", e);
			},
			changecompany2(e) {
				console.log("e:", e);
			},
			initdata() {
				this.room_name = "305-602";
				this.equipment_name = "频谱分析仪";
			},
			posttasktobooking: function() {

			},
			bindTimeChange: function() {

			},
			bindDateChange: function() {

			},
			getPhoneNumber: function() {

			},
			bindSelectChange: function() {

			},
			bindcollegeChange: function() {

			},
			bindcollegetypeChange: function() {

			},
			bindinputtext: function() {

			},
			gettask() {

			},
			getcollegelist() {

			},
			makeSessionkey(flag) {

			},
			clearwxStorage: function() {
				uni.removeStorageSync('collegevalue');
				uni.removeStorageSync('collegeIndex');
				uni.removeStorageSync('collegetypeIndex');
				uni.removeStorageSync('task2fields');
				uni.removeStorageSync('task2fieldsflag');
			},

			toschoolequipementinfo() {
				console.log('toschoolequipementinfo----')

			}
		}
	}
</script>

<style>
	page {}

	.school_content {
		display: flex;
		flex-direction: column;
		font-size: 16px;

	}

	.task-list {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 5px 5px;
	}

	.task-list-item {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		font-size: 32rpx;
		justify-content: center;
		justify-items: center;

	}

	.task-title {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 5px 0px;
		padding: 5px 5px;
		border-left: 4px solid #409eff;
		font-size: 32rpx;
	}

	/* 列表 */
	/* .task-title {
		float: left;
		width: calc(100% - 50rpx);
		height: 32rpx;
		line-height: 32rpx;
		margin: 0 24rpx 24rpx 24rpx;
		padding-left: 16rpx;
		font-size: 32rpx;
		border-left: 4px solid #409eff;
	} */

	/* .task-title:first-child {
		margin: 24rpx;
	} */

	/* .task-list {
		float: left;
		width: calc(100% - 50rpx);
		margin: 0 24rpx 24rpx 24rpx;
		background: #fff;
		border: 0px solid #ebeef5;
		border-radius: 8rpx;
	} */

	/* .task-list ul {
		float: left;
		width: 100%;
	} */

	/* 	.task-list ul li {
		float: left;
		width: calc(100% - 72rpx);
		height: 84rpx;
		line-height: 84rpx;
		padding: 0 36rpx;
		font-size: 28rpx;
		border-bottom: 0px solid #ebeef5;
		overflow: hidden;
	} */

	.task-list .gzdata {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;

		height: 84rpx;
		line-height: 84rpx;
		padding: 0 36rpx;
		font-size: 28rpx;
		border-bottom: 0px solid #ebeef5;
		overflow: hidden;
	}



	.task-list-left {
		float: left;
		width: 160rpx;
		font-weight: bold;
		color: #999;
	}

	.task-list-left text {
		color: red;
	}

	.task-list-right {
		flex: 1;
		color: #333;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;

	}

	.task-list-right .company1 {}

	.task-list .allline {
		flex-direction: column;
		text-align: left;
		border-bottom: 1px solid #cccccc;
	}

	.task2_sq_input {
		flex: 1;
		text-align: left;
		display: block;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #ebeef5;
		padding-left: 4px;

	}

	.textarea {
		flex: 1;
		text-align: left;
		font-size: 14px;

		padding: 0px 0px;
		padding-left: 4px;
		border: 1px solid #cccccc;
	}

	.picker_cu {
		font-size: 16px;
		font-weight: bold;
		color: red;
	}

	.posttasktobookingBtnparent {
		display: flex;
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.posttasktobookingBtn {

		background-color: #019ec9;
		width: 368rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #07c160;
		color: white;
		cursor: pointer;
		margin-bottom: 60rpx;
	}
	
	.container .desc {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-evenly;
	}
	
	.container .desc .green {
	    flex:1;
		color: #16A085;
		padding: 0rpx 20rpx;
		background-color: #16A085;
		
	}
	
	.container .desc .red {
		 flex:1;
		color: #E74C3C;
		padding: 0rpx 20rpx;
		background-color: #E74C3C;
	}
	
	.container .desc .yellow {
		flex:1;
		color: #F1C40F;
		padding: 0rpx 20rpx;
		background-color: #F1C40F;
	}
	
	.container .desc .gray {
		flex:1;
		color: #BDC3C7;
		padding: 0rpx 20rpx;
		background-color: #BDC3C7;
	}
	
	.container .desc .blue {
		flex:1;
		color: #4b7bec;
		padding: 0rpx 14rpx;
		background-color: #4b7bec;
	}
	
	.container .desc .purple {
		flex:1;
		color: #e84393;
		padding: 0rpx 20rpx;
		background-color: #e84393;
	}
	
	.gongwei{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		justify-items: center;
		text-align: center;
		
	}
	.gongwei .gongwei_gzdata{
		display: flex;
		flex-direction: row;
	}
	.gongwei .gongwei_gzdata .noshow{
		border: 0px solid #63c0c0;
		
		width:50px;
		height:50px;
		vertical-align: center;
		text-align: center;
		line-height: 50px;
		margin: 8px 8px;
	}
	
	.gongwei .gongwei_gzdata .isshow{
		border: 1px solid #63c0c0;
		width:50px;
		height:50px;
		line-height: 50px;
		vertical-align: center;
		text-align: center;
		margin: 8px 8px;
		
	}
</style>